<template>
  <el-card>
    <div class="" slot="header"><span>账号列表</span></div>
    <el-table
      ref="tableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <!-- 多选 -->
      <el-table-column type="selection" width="55"></el-table-column>
      <!-- 账号 -->
      <el-table-column prop="account" label="姓名"></el-table-column>
      <!-- 用户组 -->
      <el-table-column prop="userGroup" label="用户组"></el-table-column>
      <!-- 日期 -->
      <el-table-column label="日期">
        <template slot-scope="scope">
          {{ scope.row.ctime | formatYMD }}</template
        >
      </el-table-column>
      <!-- 操作 -->
      <el-table-column width="160" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>

          <el-button
            size="mini"
            type="danger"
            @click="open(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="mt20"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 5]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <!-- 操作 -->
    <div class="mt20">
      <el-button type="danger" @click="belallx">批量删除</el-button>
      <el-button type="primary" @click="deselect">取消选择</el-button>
    </div>

    <!-- 编辑弹窗 -->
    <el-dialog title="编辑用户" :visible.sync="dialogFormVisible">
      <el-form class="form" size="small" label-width="80px" :model="formData">
        <el-form-item label="用户名">
          <el-input v-model="formData.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户组">
          <el-select v-model="formData.userGroup" placeholder="请选择用户组">
            <el-option label="超级管理员" value="超级管理员"></el-option>
            <el-option label="普通用户" value="普通用户"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button size="small" type="primary" @click="handleConfirm">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { getUserListReq, editUserReq, del, delAll } from "@/api/user";

export default {
  data() {
    return {
      dialogFormVisible: false, //编辑弹窗隐藏显示

      //弹窗修改数据
      formData: {
        id: "",
        account: "",
        userGroup: "",
      },
      //表格数据
      tableData: [],
      //多选数据
      ids: [],
      //分页数据
      currentPage: 1,
      pageSize: 3,
      total: 0,
    };
  },
  //方法
  methods: {
    ...mapActions("user", ["delx"]),

    //获取数据函数
    async getData() {
      //提取数据
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;
      //发送请求
      let res = await getUserListReq({
        currentPage,
        pageSize,
      });
      //解构数据
      let { data, total } = res.data;
      //数据赋值
      this.total = total;
      this.tableData = data;

      //如果没有数据，就跳到上一页
      if (data.length === 0 && this.currentPage !== 1) {
        this.currentPage--;
        this.getData();
      }
    },
    belallx() {
      //点击传递数据删除
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await delAll({ ids: this.ids });
          let { code, msg } = res.data;
          console.log(msg);
          this.getData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    deselect() {
      //取消选中
      this.ids = [];
      this.$refs.tableRef.clearSelection(); //点击取消
    },
    handleSelectionChange(val) {
      //选中后添加到数组
      val.map((v) => {
        this.ids.push(v.id);
      });
    },

    //编辑
    handleEdit(index, row) {
      //把弹窗开启-组件上控制显示和隐藏
      this.dialogFormVisible = true;

      //把数据显示在弹窗上面-浅拷贝一层
      //此时formData有了数据，那么就可以在弹窗内显示
      this.formData = { ...row };
    },

    //确认
    async handleConfirm() {
      console.log(this.formData);
      let res = await editUserReq(this.formData);
      let { code, msg } = res.data;
      if (code === 0) {
        this.dialogFormVisible = false;
        //重新拉取数据
        this.getData();
      }
    },

    //改变页码
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    //改变当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },

    open(index, row) {
      //确认删除
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let id = row.id;
          del({ id });
          this.tableData.splice(index, 1);
          this.getData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  created() {
    this.getData(); //生命周期渲染前
  },
};
</script>

<style lang="scss" scoped></style>
